import { StyleSheet } from 'react-native'
import { Text, View, ScrollView } from 'native-base'
import React, { useEffect, useState } from 'react'
import axios from '../axios'
import IconBox from '../components/IconBox'

const Category = ({ route, navigation }) => {
  const { index } = route.params
  const [current, setCurrent] = useState(index || 0)
  const [list, setList] = useState([])
  useEffect(() => {
    axios.get('/category').then(res => {
      setList(res.data)
    }).catch(err => { })
  }, [])
  const tabChange = (index) => {
    console.log('tab')
    setCurrent(index)
  }
  const to = (category) => {
    navigation.navigate('GoodsResult', {
      category
    })
  }
  return (
    <View style={styles.container}>
      <View style={styles.left}>
        <ScrollView>
          {
            list.map((item, index) => {
              return (
                <Text key={item._id} style={[styles.item, index === current && styles.active]}
                  onPress={() => tabChange(index)}>
                  {item.name}
                </Text>
              )
            })
          }
        </ScrollView>
      </View>
      <View style={styles.right}>
        <ScrollView>
          {/* <Text style={styles.title}>{list[current].name}</Text> */}
          <View style={styles.children}>
            {
              list[current]?.children.map((item, index) => {
                return (
                  <IconBox style={[styles.iconBox]} onPress={()=>to(item._id)}
                  data={item} key={item._id}></IconBox>
                )
              })
            }
          </View>
        </ScrollView>
      </View>
    </View>
  )
}

export default Category

const leftBGColor = '#ddd'
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row'
  },
  left: {
    flex: 1,
    backgroundColor: leftBGColor
  },
  item: {
    textAlign: 'center',
    paddingVertical: 15,
    backgroundColor: leftBGColor
  },
  active: {
    backgroundColor: '#fff',
    fontWeight: 'bold',
    fontSize: 16
  },
  right: {
    flex: 3,
    // display: 'flex',
    // alignItems: 'center'
    // backgroundColor: 'red'
  },
  title: {
    fontWeight: 'bold',
    fontSize: 16
  },
  children: {
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'row',
    // justifyContent: 'center',
    flexWrap: 'wrap',
    // backgroundColor: 'red',
    // marginHorizontal: 15
  },
  iconBox: {
    marginBottom: 20,
    marginHorizontal: 15
    // backgroundColor: 'blue'
  }
})